<template>
	<view class="app">

		<view v-if="isCom" class="aniall">
			<view class="block1"></view>
			<view class="block2"></view>
		</view>

 
		<view class="yy" @click="outLogin">
			<view class="text">退出登录</view>
		</view>
		<view class="yy" @click="setRoom">
			<view class="text">设置寝室</view>
		</view>
		<view class="yy" @click="toLog">
			<view class="text">更新日志</view>
		</view>
<!-- 		<view class="yy" @click="isCom = !isCom">
			<view class="text">1</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCom:false
			};
		},
		onShow() {
			
		},
		onLoad() {
			this.isCom = true
		},
		methods:{
			outLogin(){
				uni.removeStorageSync("pwd")
				uni.removeStorageSync("user")
				uni.removeStorageSync("msg")
				uni.showToast({
					title:"清除缓存成功"
				})
				
				uni.reLaunch({
					url:'../index/index'
				})
				
			},
			setRoom(){
				uni.navigateTo({
					url:'/pages/my/setRoom/setRoom',
					animationType:"pop-in",
					animationDuration:200
				})
			},
			toLog(){
				
				uni.navigateTo({
					url:'/pages/index/updateLog/updateLog',
					animationType:"pop-in",
					animationDuration:200
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		//background-color: #f4f4f4;
	}
	.aniall{
		width: 100%;
		height: 100%;
		overflow: hidden;
		.block1{
			width: 500rpx;
			height: 500rpx;
			background-color: #d9b67d;
			position: absolute;
			top: 30rpx;
			right: -320rpx;
			border-radius: 15px;
			z-index: -1;
			animation: block_1 1s ease forwards;//infinite
			filter: blur(10px);
			box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.3);
			@keyframes block_1 {
				0%{
					transform: rotate(0deg);
					right: -320rpx;
				}
				100%{
					transform: rotate(20deg);
					right: -120rpx;
				}
			}
		}
		.block2{
			width: 500rpx;
			height: 500rpx;
			background-color: #67a1ed;
			position: absolute;
			bottom: 120rpx;
			left: -200rpx;
			border-radius: 25px;
			z-index: -1;
			animation: block_1 1s ease forwards ;
			filter: blur(10px);
			box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.3);
			@keyframes block_2 {
				0%{
					transform: rotate(0deg);
					left: -200rpx;
				}
				100%{
					transform: rotate(20deg);
					left: -220rpx;
				}
			}
		}
		.block3{
			width: 300rpx;
			height: 300rpx;
			background-color: #fa8082;
			position: absolute;
			top: 10%;
			left: 10%;
			border-radius: 30%;
			z-index: -2;
			animation: block_3 1.3s ease 1 forwards;
			filter: blur(30px);
			box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.3);
			@keyframes block_3 {
				0%{
				}
				100%{
					transform: rotate(45deg);
					right: -220rpx;
					scale: 4;
				}
			}
		}
	}
	.yy{
		margin: 10px auto;
		width: 700rpx;
		height: 80rpx;
		color: #090909;
		// padding: 25rpx 20rpx;
		font-size: 18px;
		border-radius: 0.5em;
		background: #e8e8e8;
		backdrop-filter: blur(15px);
		border: 1px solid #e8e8e8;
		transition: all .3s;
		box-shadow: 6px 6px 12px #c5c5c5,
					-6px -6px 12px #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		.text{
			font-weight: 900;
			color: #63a7e2;
			text-shadow: 1px 1px 3px rgba(255, 255, 255, 1);
		}
		&:hover{
			border: 1px solid white;
		}
		&:active{
			box-shadow: 4px 4px 12px #c5c5c5,
			            -4px -4px 12px #ffffff;
		}
	}
	
	.out-login{
		width: 700rpx;
		height: 80rpx;
		background-color: #50a3d9;
		border-radius: 10rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
	.text-out{
		font-weight: bold;
		font-size: 35rpx;
		color: white;
		margin: 0 auto;
	}
	
}
</style>
